<template>
  <div>
    <el-page-header @back="$router.back()" :content="$route.name"/>
    <el-main style="margin-top: 20px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="包裹状态">
          <el-select v-model="pkgState" @change="search" placeholder="请选择">
            <el-option v-for="item in pkgStateList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker v-model="date" @change="search"
                          type="month" :clearable="false"
                          placeholder="选择月"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right; padding-right: 0; margin-right: 0">
          <el-button type="primary" @click="$router.push('/pkg/new')">新的包裹</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <package-table :data="data" see
                   :handle-size-change="handleSizeChange"
                   :handle-current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"/>
  </div>
</template>

<script>
import PackageTable from "../components/PackageTable";

export default {
  name: "MyPkg",
  components: {PackageTable},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    search() {
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const user = this.$store.state.user
      const data = {
        id: user.id,
        currState: this.pkgState,
        year: this.date.getFullYear(),
        month: this.date.getMonth() + 1,
        page: this.currentPage,
        pageSize: this.pageSize
      }
      this.$axios.post(this.$serverUrl + '/pkg/myList',
          data).then(response => {
        // console.log(response.data.data)
        this.total = response.data.total
        this.data = response.data.data
      }).catch(error => {
        console.log(error)
      })
    }
  },
  data() {
    return {
      pkgStateList: this.$store.state.pkgStateList,
      pkgState: 0,
      date: new Date(),
      currentPage: 1,
      pageSize: 5,
      total: 0,
      data: [],
    };
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
/*.from {*/
/*    margin: auto;*/
/*}*/

.el-form-item {
  padding-right: 20px;
}
</style>